<template>
  <div class="title">
    <center>
      <h3>怡家私厨</h3>
      <van-button color="pink" @click="login">登录</van-button>
      <van-button color="red" @click="register">注册</van-button>
      <van-button color="pink" @click="shopsreg">商家入驻</van-button>
      <van-button color="red" @click="shopslogin">商家登录</van-button>
      <van-button color="pink" @click="logout">退出登录</van-button>
    </center>
  </div>
  <div>
    <div class="user_update">
      <center>
        <van-image
          v-if="user.avatar_url"
          round
          fit="cover"
          :src="user.avatar_url"
          width="150px"
          height="150px"
        />
      </center>
      <van-cell
        title="昵称"
        :value="user.nickname"
        @click="nicknameShow = true"
        is-link
      />
      <van-cell title="头像" @click="avatar_urlShow = true" is-link>
        <template #value>
          <van-image
            v-if="user.avatar_url"
            round
            fit="cover"
            :src="user.avatar_url"
            width="50px"
            height="50px"
          />
          <span v-else>无</span>
        </template>
      </van-cell>

      <van-cell
        title="密码"
        value="******"
        @click="passwordShow = true"
        is-link
      />
    </div>

    <!-- 修改个人信息 -->
    <!-- 修改昵称 -->
    <van-dialog
      title="修改昵称"
      v-model:show="nicknameShow"
      :show-confirm-button="false"
      close-on-click-overlay
    >
      <van-form @submit="upd">
        <van-field
          placeholder="昵称"
          v-model="up_user.nickname"
          :rules="rules.nickname"
        />
        <van-button
          round
          block
          color="linear-gradient(to right, #ff8360, #ee0a24)"
          native-type="submit"
          class="dialog_button"
        >
          提交
        </van-button>
      </van-form>
    </van-dialog>
    <!-- 修改密码 -->
    <van-dialog
      title="修改密码"
      v-model:show="passwordShow"
      :show-confirm-button="false"
      close-on-click-overlay
    >
      <van-form @submit="up_user_data">
        <van-field
          v-model="up_user.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="rules.password"
        />
        <van-field
          v-model="up_user.pwd"
          type="password"
          name="确认密码"
          label="确认密码"
          placeholder="确认密码"
          :rules="[{ validator: password_data }]"
        />
        <van-button
          round
          block
          color="linear-gradient(to right, #ff8360, #ee0a24)"
          native-type="submit"
          class="dialog_button"
        >
          提交
        </van-button>
      </van-form>
    </van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    const password_data = (value) => {
      if (!value) {
        alert("请输入密码");
      }
      if (this.up_user.password && this.up_user.pwd) {
        if (this.up_user.password != this.up_user.pwd) {
          alert("密码不一致 请重新输入!!!!");
        }
      }
    };
    return {
      user_id: localStorage.getItem("id"),
      user: [],
      password_data,
      up_user: {},
      rules: {},
      pwd: null,
      nicknameShow: false,
      passwordShow: false,
    };
  },
  methods: {
    // 获取商家信息
    submit: function () {
      this.myaxios(this.weburl + "shops/userinfo/", "get", {
        user_id: this.user_id,
      })
        .then((data) => {
          console.log(data);
          this.user = data.data;
          console.log(this.user);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 修改
    upd: function () {
      this.myaxios(this.weburl + "shops/userinfo/", "put", {
        user_id: this.user_id,
      }).then((data) => {
        if (data.code == 200) {
          this.$toast.success(data.msg);

          this.nicknameShow = false;
          this.passwordShow = false;
          this.submit();
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
    // 跳转到登录
    login: function () {
      this.$router.push({ name: "login" });
    },
    // 跳转到注册
    register: function () {
      this.$router.push({ name: "register" });
    },
    // 跳转到商家入驻
    shopsreg: function () {
      this.$router.push({ name: "shopsreg" });
    },
    // 跳转到商家登录
    shopslogin: function () {
      this.$router.push({ name: "shopslogin" });
    },
    // 退出登录方法
    logout: function () {
      // 删除localstorage
      localStorage.removeItem("token");
      localStorage.removeItem("nickname");
      localStorage.removeItem("id");
      this.name = "";
      // 跳转
      window.location.href = "/index/shopslist";
    },
  },
  created() {
    this.submit();
  },
};
</script>

<style>
</style>